// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import com.nokia.symbian 1.1
import com.nokia.extras 1.1
import "../Script.js" as Script
Page{
    id: page
    property string title : "France"
    onVisibleChanged: addItem();
    function addItem(){
        list.clear();
        list.insert(0,{"lieu":qsTr("A20"),"texte" :"Autouroute A20 ( Vierzon, Châteauroux, Limoges, Brive).", "imagesrc": "qrc:/a20"})
        list.insert(1,{"lieu":qsTr("A31"),"texte" :"Autouroute A31 ( Luxembourge, Metz, Nancy ).", "imagesrc": "qrc:/a31"})
        list.insert(2,{"lieu":qsTr("A75"),"texte" :"Autouroute A75 ( Clermont-Ferrant, Bréziers ).", "imagesrc": "qrc:/a75"})
        list.insert(3,{"lieu":qsTr("Bordeaux"),"texte" :"Rocades de <b>Bordeaux</b>", "imagesrc": "qrc:/bordeaux"})
        list.insert(4,{"lieu":qsTr("Caen"),"texte" :"Rocades de <b>Caen</b>", "imagesrc": "qrc:/caen"})
        list.insert(5,{"lieu":qsTr("Grenoble"),"texte" :"Rocades de <b>Grenoble</b>", "imagesrc": "qrc:/grenoble"})
        list.insert(6,{"lieu":qsTr("Lille"),"texte" :"Rocades de <b>Lille</b>", "imagesrc": "qrc:/lille"})
        list.insert(7,{"lieu":qsTr("Lyon"),"texte" :"Rocades de <b>Lyon</b>", "imagesrc": "qrc:/lyon"})
        list.insert(8,{"lieu":qsTr("Marseille"),"texte" :"Rocades de <b>Marseille</b>", "imagesrc": "qrc:/marseille"})
        list.insert(9,{"lieu":qsTr("Nantes"),"texte" :"Rocades de <b>Nantes</b>", "imagesrc": "qrc:/nantes"})
        list.insert(10,{"lieu":qsTr("Rennes"),"texte" :"Rocades de <b>Rennes</b>", "imagesrc": "qrc:/rennes"})
        list.insert(11,{"lieu":qsTr("Savoie"),"texte" :"Rocades de la <b>Savoie</b>", "imagesrc": "qrc:/savoie"})
        list.insert(12,{"lieu":qsTr("St-Etienne"),"texte" :"Rocades <b>St-Etienne</b>", "imagesrc": "qrc:/stetienne"})
        list.insert(13,{"lieu":qsTr("Strasbourg"),"texte" :"Rocades de <b>Strasbourg</b>", "imagesrc": "qrc:/strasbourg"})
        list.insert(14,{"lieu":qsTr("Toulon"),"texte" :"Rocades de <b>Toulon</b>", "imagesrc": "qrc:/toulon"})
        list.insert(15,{"lieu":qsTr("Toulouse"),"texte" :"Rocades de <b>Toulouse</b>", "imagesrc": "qrc:/toulouse"})
    }

    function lieuSelected(nb){
        console.debug("Lieu selected " + nb)
        Script.setImageURL(nb);

        window.pageStack.push(Qt.resolvedUrl("France_choix.qml"))
    }
    tools: ToolBarLayout {
            id: toolBarLayout
            ToolButton {
                   iconSource: "toolbar-back"
                   onClicked: {
                       pageStack.pop();
                   }
               }
        }
    Component {
        id: delegateList
        Rectangle{
            id: rectangle_content
            width: 500
            height: 80
            anchors.right: parent.right
            anchors.left: parent.left
            color: "transparent"

            Rectangle{
                id: rectangle_title
                height: 30
                color: "gray"
                anchors.right: image.left
                anchors.rightMargin: 0
                anchors.left: parent.left
                anchors.leftMargin: 0
                opacity: 0.6
                Text {
                    id: title
                    text: lieu
                    font.pixelSize: 20
                    font.bold: true
                    color: "white"
                }
            }
            Text {
                id: subTitle
                text: texte
                anchors.top: rectangle_title.bottom
                anchors.topMargin: 0
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 0
                wrapMode: Text.WordWrap
                anchors.left: parent.left
                anchors.leftMargin: 0
                anchors.right: image.left
                anchors.rightMargin: 0
                color: "white"
                font.pixelSize: 15
            }

            Image {
                id: image
                x: 419
                width: 80
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 0
                anchors.right: parent.right
                anchors.rightMargin: 0
                anchors.top: parent.top
                anchors.topMargin: 0
                source: imagesrc
            }
            MouseArea{
                id: mouse
                anchors.fill: parent
                onClicked: {
                    lieuSelected(title.text)
                }
            }

//            states: State {
//                name: "Current"
//                when: delegateList.
//                PropertyChanges {
//                    target: object

//                }
//            }

        }

    }


    Component {
        id: highlightBar
        Rectangle {
            width: 200; height: 50
            color: "#FFFF88"
//            y: listview.currentItem.y;
            Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
        }
    }
    ListView {
        id: listview
        anchors.fill: parent
        anchors.topMargin: 25

//        highlight: highlightBar
        focus: true
        highlightFollowsCurrentItem: true
        delegate: delegateList
        model: ListModel {
                id: list
            }
        }

}
